<template>
  <div class="login-container">
    <div class="form-wrapper">
      <!-- 登录表单 -->
      <div v-if="isLogin" class="form login-form">
        <h2>用户登录</h2>
        <form @submit.prevent="handleLogin">
          <div class="input-group">
            <label for="login-username">用户名:</label>
            <input type="text" id="login-username" v-model="loginData.loginName" required />
          </div>
          <div class="input-group">
            <label for="login-password">密码:</label>
            <input type="password" id="login-password" v-model="loginData.password" required />
          </div>
          <button type="submit">登录</button>
          <p class="toggle-link" @click="toggleForm(false)">没有账号？点击注册</p>
        </form>
      </div>

      <!-- 注册表单 -->
      <div v-else class="form register-form">
        <h2>用户注册</h2>
        <form @submit.prevent="handleRegister">
          <div class="input-group">
            <label for="register-username">用户名:</label>
            <input type="text" id="register-username" v-model="registerData.loginName" required />
          </div>
          <div class="input-group">
            <label for="register-username">昵称:</label>
            <input type="text"  v-model="registerData.name" required />
          </div>
          <div class="input-group">
            <label for="register-password">密码:</label>
            <input type="password" id="register-password" v-model="registerData.password" required />
          </div>
          <div class="input-group">
            <label for="confirm-password">确认密码:</label>
            <input type="password" id="confirm-password" v-model="registerData.confirmPassword" required />
          </div>
          <button type="submit">注册</button>
          <p class="toggle-link" @click="toggleForm(true)">已有账号？点击登录</p>
        </form>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';

// 表单切换状态
const isLogin = ref(true);

// 登录数据
const loginData = ref({
  loginName: "",
  password: ""
});

// 注册数据
const registerData = ref({
  loginName: '',
  name: '',
  password: '',
  confirmPassword: ''
});

// 切换登录/注册表单
const toggleForm = (formType) => {
  isLogin.value = formType;
};

import axios from "axios";

import { message } from 'ant-design-vue';
import store from '@/store';
import { useRouter} from 'vue-router';
const router = useRouter();

const user =ref();
// 模拟登录逻辑
const handleLogin = () => {
 console.log("开始登录");
 
  
  // 密码加密（确保hexMd5和KEY已定义）
  // loginUser.value.password = hexMd5(loginUser.value.password + KEY);
 

  
  axios.post('/user/login', loginData.value).then((response) => {

    const data = response.data;
    
    if (data.success) {

    
      console.log("登录成功返回数据:", data);
      
      user.value = data.content;
      // 更新store中的用户信息
      store.commit("setUser",user.value); 
      
      message.success("登录成功！");
      router.push('/');

    } else {
      message.error(data.message);
     
    }
  }).catch(error => {
  
    message.error("登录失败: " + error.message);
  });
};

// 模拟注册逻辑
const handleRegister = () => {
  if (registerData.value.password !== registerData.value.confirmPassword) {
    alert('两次输入的密码不一致！');
    return;
  }
  
  console.log('正在注册...');

  axios.post('/user/save', registerData.value).then((response) => { 
    const data = response.data;
   
      console.log("注册成功返回数据:", data);
     
    if (data.success) {
      message.success("注册成功！");
     
    } else {
      message.error(data.message);
    }
   
  });
  
  
  toggleForm(true);
};
</script>

<style scoped>
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f0f2f5;
}

.form-wrapper {
  background: white;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 400px;
}

.form h2 {
  text-align: center;
  margin-bottom: 20px;
}

.input-group {
  margin-bottom: 15px;
}

.input-group label {
  display: block;
  font-weight: bold;
  margin-bottom: 5px;
}

.input-group input {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

button {
  width: 100%;
  padding: 10px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}

button:hover {
  background-color: #0056b3;
}

.toggle-link {
  margin-top: 15px;
  text-align: center;
  cursor: pointer;
  color: #007bff;
}
</style>